<template>
	<view class="cart">
		<!-- 当购物车商品为空时 显示 -->
		<view class="cartNull" v-if="cartList.length === 0">
			<image class="picNull" src="../../static/cartSvg/cart.svg" mode=""></image>
			<view class="null">去添加点什么吧</view>
		</view>

		<!-- 当购物车有商品时 显示 -->
		<view class="cartList" v-if="cartList.length > 0">
			<!-- 购物车列表  -->
			<scroll-view class="cartItem" scroll-y="true">
				<view class="goodsList" v-for="(item, index) in cartList" :key="index">
					<!-- 选中框 -->
					<view class="tuBiaoLeft">
						<i class="iconfont icon-selected" :class="{ selected: item.isSelected }" @click="changeState(!item.isSelected, index)"></i>
					</view>
					<!-- 商品信息 -->
					<view class="infoRight">
						<view class="goodsImg">
							<image :src="item.listPicUrl" mode=""></image>
						</view>
						<view class="goodsInfo">
							<view class="goodsDesc">{{ item.name }}</view>
							<view class="goodsPrice">￥ {{ item.retailPrice }}</view>
							<view class="goodsNum">
								<text style="border-radius: 8rpx 0 0 8rpx" @click="changeNum(false, index)">-</text>
								<text>{{ item.count }}</text>
								<text style="border-radius: 0 8rpx 8rpx 0" @click="changeNum(true, index)">+</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- 底部按钮 -->
			<view class="footer">
				<view class="tubiao" :class="{ allSelected: isAllSelectedGetters }" @click="changeAllSelected(!isAllSelectedGetters)">
					<i class="iconfont icon-selected"></i>
				</view>
				<view class="text">合计 {{ selectedGoodsNumGetters }} 样</view>
				<view class="buy" style="text-align: right; padding-right: 15rpx; color: #bb2c08">合计：{{ allPriceGetters }}￥</view>
				<view class="buy single">立即购买</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex';
export default {
	name: 'cart',
	data() {
		return {
			// num: -1
		};
	},
	created() {},
	computed: {
		...mapState({
			cartList: (state) => state.cart.cartList
		}),
		...mapGetters('cart', ['isAllSelectedGetters']),
		...mapGetters('cart', ['allPriceGetters']),
		...mapGetters('cart', ['selectedGoodsNumGetters'])
	},
	methods: {
		...mapMutations('cart', ['changeGoodsCountMutations', 'changeStateMutations', 'changeAllStateMutations']),
		// 修改购物车商品数量
		changeNum(change, index) {
			this.changeGoodsCountMutations({ change, index });
		},
		// 修改商品选中状态
		changeState(isSelected, index) {
			this.changeStateMutations({ isSelected, index });
		},
		// 修改全选按钮选中状态 进而控制商品选中状态
		changeAllSelected(isSelected) {
			this.changeAllStateMutations(isSelected);
		}
	}
};
</script>

<style lang="stylus">
@import "../../static/tuBiaoStyle/xuanZhong.css";
.cart
	.cartNull
		width 100%
		height calc(100vh - 200rpx)
		.picNull
			display block
			margin 0rpx auto
			margin-top 200rpx
			width 320rpx
			height 240rpx
		.null
			text-align center
			font-size 30rpx
			color #A9A9A9
	.cartList
		padding-bottom 100rpx
		.cartItem
			padding-top 20rpx
			padding-bottom 20rpx
			height calc(100vh - 140rpx)
			background-color #dcdcdc
			.goodsList
				width 700rpx
				height 220rpx
				margin 0rpx auto
				margin-bottom 20rpx
				background-color #fff
				border-radius 20rpx
				box-shadow: 0px 4px 8px rgba(255,127,80, 0.5)
				display flex
				.tuBiaoLeft
					width 20%
					display flex
					justify-content: center
					align-items: center
					// .icon
					// 	width 50%
					// 	height 50%
					.selected
						color red
				.infoRight
					width 80%
					display flex
					padding-top 36rpx
					padding-right 30rpx
					.goodsImg
						width 150rpx
						height 150rpx
						background-color: hotpink
						margin-right 30rpx
						image
							width 150rpx
							height 150rpx
					.goodsInfo
						width 70%
						height 150rpx
						position relative
						.goodsDesc
							overflow: hidden
							white-space: no-wrap
							text-overflow: ellipsis
						.goodsPrice
							color #bb2c08
							font-weight: 800
							margin-top 40rpx
						.goodsNum
							position: absolute
							bottom 0
							right 0
							text
								padding 0 16rpx
								border 2rpx solid #A9A9A9
								&:nth-child(2)
									border none
									border-top 2rpx solid #A9A9A9
									border-bottom 2rpx solid #A9A9A9
		.footer
			height 100rpx
			background-color #fff
			border-top 2rpx solid #dcdcdc
			line-height 100rpx
			position: fixed
			bottom 0
			left 0
			right 0
			display flex
			.allSelected
				color red
			.tubiao
				flex 1
				height 100rpx
				line-height: 100rpx
				display: flex
				justify-content: flex-end
			.text
				flex 2.5
				height 100rpx
				line-height: 100rpx
				margin-left: 6rpx
				text-align left
			.buy
				flex 4
				border-left 1px solid #ccc
				text-align center
			.single
				flex 3
				background-color #BB2c08
				color #FFF
				font-weight: 800
				font-size: 35rpx
</style>
